<template>
  <!-- @imgAdd="imgAdd"  v-model="content"-->
  <mavon-editor
    v-model="content"
    :toolbars="markdownOption"
    @change="change"
    ref="md"
    style="min-height: 550px"
  />
</template>
<script>
// git 地址：https://github.com/hinesboy/mavonEditor
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";

// anguage	String	zh-CN	语言选择，暂支持 zh-CN: 简体中文,  en: 英文 ， fr: 法语， pt-BR: 葡萄牙语， ru: 俄语， de: 德语， ja: 日语
// fontSize	String	14px	编辑区域文字大小
// scrollStyle	Boolean	true	开启滚动条样式(暂时仅支持chrome)
// boxShadow	Boolean	true	开启边框阴影
// boxShadowStyle	String	0 2px 12px 0 rgba(0, 0, 0, 0.1)	边框阴影样式
// transition	Boolean	true	是否开启过渡动画
// toolbarsBackground	String	#ffffff	工具栏背景颜色
// previewBackground	String	#fbfbfb	预览框背景颜色
// subfield	Boolean	true	true： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏)
// defaultOpen	String		edit： 默认展示编辑区域 ， preview： 默认展示预览区域 , 其他 = edit
// placeholder	String	开始编辑...	输入框为空时默认提示文本
// editable	Boolean	true	是否允许编辑
// codeStyle	String	code-github	markdown样式： 默认github, 可选配色方案
// toolbarsFlag	Boolean	true	工具栏是否显示
// navigation	Boolean	false	默认展示目录
// shortCut	Boolean	true	是否启用快捷键
// autofocus	Boolean	true	自动聚焦到文本框
// ishljs	Boolean	true	代码高亮
// imageFilter	function	null	图片过滤函数，参数为一个File Object，要求返回一个Boolean, true表示文件合法，false表示文件不合法
// imageClick	function	null	图片点击事件，默认为预览，可覆盖
// tabSize	Number	\t	tab转化为几个空格，默认为\t
// xssOptions	Object	null	xss规则配置，参考 https://github.com/leizongmin/js-xss
export default {
  name: "Markdown",
  components: { mavonEditor },
  data() {
    return {
      markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: false, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: false, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: false, // 单双栏模式
        preview: true, // 预览,
        defaultOpen: "edit",
      },
      content: "",
    };
  },
  methods: {
    // 将图片上传到服务器，返回地址替换到md中
    // imgAdd(pos, $file) {
    //   console.log($file);
    //   let formdata = new FormData();
    //   this.$upload
    //     .post("/上传接口地址", formdata)
    //     .then((res) => {
    //       console.log(res.data);
    //       this.$refs.md.$img2Url(pos, res.data);
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    // 所有操作都会被解析重新渲染
    change(value, render) {
      // render 为 markdown 解析后的结果[html]
      // this.html = render;
      this.$emit("callback", render);
    },
    // 提交
    save() {
      //   this.$message.success("提交成功，已打印至控制台！");
    },
  },
};
</script>
<style lang="css" scoped>
/* 解决编辑器遮挡住顶部菜单 */
.v-note-wrapper {
  z-index: 0;
}
</style>

 